const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
	// 入口 ：相对路径 是相对运行代码的目录
	entry: './src/main.js',
	//   出口：绝对路径  
	// webpack2024/dist/main.js
	output: {
		//bug原因：出口路径错误

		// 入口文件打包输出文件名
		filename: 'static/js/main.js',
		// 文件输出路径
		path: path.resolve(__dirname, 'dist'),
		// 自动清空上次打包内容 原理：在打包前，将path整个目录内容清空，再进行打包
		clean: true,
	},
	module: {
		rules: [
			// {
			// 	test: /\.(js|jsx)$/,
			// 	use: 'babel-loader',
			// },
			// css-loader将css打包到js中；style-loader创建style标签，添加到html中生效
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
			{
				test: /\.less$/,
				// loader: 'xxx', // 只能使用1个loader
				use: [
					// compiles Less to CSS
					'style-loader',
					'css-loader',
					'less-loader', // 将less编译成css文件
				],
			},
			{
				test: /\.s[ac]ss$/,
				use: [
					// 将 JS 字符串生成为 style 节点
					'style-loader',
					// 将 CSS 转化成 CommonJS 模块
					'css-loader',
					// 将 Sass 编译成 CSS
					'sass-loader',
				],
			},
			{
				test: /\.styl$/,
				use: [
					// 将 JS 字符串生成为 style 节点
					'style-loader',
					// 将 CSS 转化成 CommonJS 模块
					'css-loader',
					// 将 stylus 编译成 CSS
					'stylus-loader',
				],
			},
			// 搜索inline inlining asset
			{
				test: /\.(png|jpe?g|gif|webp|svg)$/,
				// 文件小于某个大小转化为base64
				type: 'asset',
				parser: {
					dataUrlCondition: {
						// 小于10kb的图片转base64
						// 优点：减少请求数量  缺点：体积会更大
						maxSize: 10 * 1024 // 10kb
					}
				},
				// 形成文件名字
				// ext:文件扩展名 query：携带参数
				//  [hash:10] hash值取前10位
				generator: {
					filename: 'static/images/[hash:10][ext][query]'
				}
			},
			{
				// test: /\.(ttf|woff2?)$/,
				test: /\.(ttf|woff2?|map4|map3|avi)$/,
				// 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现 不压缩
				type: 'asset/resource',
				generator: {
					filename: 'static/media/[hash:10][ext][query]'
				}
			},
			{
				test: /\.js$/,
				exclude: /node_modules/, // 排除node_modules代码不编译
				loader: "babel-loader",
				// 也可以在babel.config.js中配置
				// options: {
				// 	presets: ['@babel/preset-env']
				// },
			},
		],
	},

	plugins: [
		new ESLintPlugin({
			// 检测文件所在的路径
			context: path.resolve(__dirname, 'src')
		}),
		new HtmlWebpackPlugin({
			// 以 public/index.html 为模板创建文件
			// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
			template: path.resolve(__dirname, "src/public/index.html"),
		}),
	],
	// 开发服务器  注意这里的版本："webpack-dev-server": "^4.8.1"
	// 开发服务器: 不会输出资源，在内存中编译打包的
	devServer: {
		host: "localhost", // 启动服务器域名
		port: "3000", // 启动服务器端口号
		open: true, // 是否自动打开浏览器
	},
	mode: 'development'
}